@import 'base';
@rootSize:37.5rem;
body {
    background-color: #ffffff;
}
// 头部搜索框
.top-search {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    background-color: #ffffff;
    padding: (7 / @rootSize) (15 / @rootSize);
    height: (46 / @rootSize);
    // width: (344 / @rootSize);
    display: flex;
    // align-items: center;

    p {
        font-size: (13/ @rootSize);
        font-weight: bold;
        width: (50 / @rootSize);
        height: (32 /@rootSize);
        line-height: (32 /@rootSize);
    }
   .search {
    flex: 1;
    //    width: 253px;
    input {
        height: (32 /@rootSize);
        border-radius: (22 / @rootSize);
        background-color: #f7f7f7;
        // background-color: pink;
        text-indent: (38 / @rootSize);
        line-height: (32 /@rootSize);
        padding-bottom: 10px;
        background: url(../icons/header_search.png) no-repeat (16 / @rootSize) center / (10 / @rootSize);

        &::placeholder {
            color: #bcbcbc;
            font-size: (12/ @rootSize);

        }
        
        

    }
   }
    .pic {
        height: (32 / @rootSize);
        width: (43 / @rootSize);
        text-align: right;
        // line-height: (50 / @rootSize);
        
        img{
            width: (18/ @rootSize);
        }
    }

}
.main {
    padding: 46px 15px 50px;
    // 轮播图
.banner {
    // width: (345 / @rootSize);
    // padding: 0 (15 / @rootSize);
    .pic {
        // margin: 0 (15 / @rootSize);
        box-shadow: 0 10px 5px rgba(0, 0, 0, .1);
        height: (130 / @rootSize);
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .change {
        display: flex;
        justify-content: center;
        margin-top: (10 / @rootSize);
        // height: (17 / @rootSize);
        // line-height: (17 / @rootSize);
        .box {
            margin-right: (8 / @rootSize);
            width: (10 / @rootSize);
            height: (2 / @rootSize);
            border-radius: (4 / @rootSize);
            background-color: #333;
        }
    }
}
// 导航区域
.nav {
    display: flex;
    // padding: 0 (15 / @rootSize);
    margin-top: (20 / @rootSize);
    margin-bottom: (36 / @rootSize);
    // justify-content: space-between;
    .left {
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
        margin-right: (10 / @rootSize);
        width: (167 / @rootSize);
        height: (70 / @rootSize);     
        background: url(../icons/nav_1.png) no-repeat 0 0 / cover;
    }
    .right {
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
        width: (167 / @rootSize);
        height: (70 / @rootSize);     
        background: url(../icons/nav_2.png) no-repeat 0 0 / cover;
    }

}
// 超值优惠
.content {
    margin-bottom: (30 / @rootSize);
    // padding: 0 (15 / @rootSize);
    .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: (20 / @rootSize);
        .title {
            font-size: (18 / @rootSize);
            font-weight: bold;
            color: #333;
        }
        .more {
            img {
                width: (8 / @rootSize);
            }
        }
    }

    .bottom {
        ul {
            display: flex;
            li {
                margin-right: 10px;
                width: (170 / @rootSize);
                height: (185 / @rootSize);
                a {
                    display: block;
                    color: #333;
                    .pic {
                        margin-bottom: (15 / @rootSize);
                        height: (115 / @rootSize);       
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;        
                    }
    
                }
                h4 {
                    font-size: (13 / @rootSize);
                    margin-bottom: (8 / @rootSize);

                }
                p {
                    color: #c0c0c0;
                    font-size: (11/ @rootSize);
                    // margin-bottom: (12/ @rootSize);
                }
                span {
                    font-size: (11/ @rootSize);
                    color: #f4a522;

                }
                }
       
        }
    }




}
}
// 广告
.ad {
    margin-bottom: (30 / @rootSize);
    .pic {
        // margin: 0 (15 / @rootSize);
        height: (56 / @rootSize);
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
// 为你推荐
.tuijian {
    margin-bottom: (36/ @rootSize);
    padding: 0 (15 / @rootSize);
    .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: (24 / @rootSize);
        .title {
            font-size: (18 / @rootSize);
            font-weight: bold;
            color: #333;
        }
        .right {
            display: flex;
            font-size: (14 / @rootSize);
            p {
                color: #333;
                margin-right: (25 / @rootSize);
            }
            .he {
                font-size: (14 / @rootSize);
                color: #b6b6b6;
     
        }
    }
}
     .list {
        width: 100%;
        ul {
            width: 100%;
            li {
                width: 100%;
                // width: (340 / @rootSize);
                height: (80 / @rootSize);
                display: flex;
                margin-bottom: (50 / @rootSize);
                .pic {
                    display: block;
                    width: (110 / @rootSize);
                    height: (80 / @rootSize);
                    margin-right: (16 / @rootSize);
                    overflow: hidden;
                    img {
                        border-radius: 5px;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }    
            
                }
                .text {
                    color: #cdcdcd;
                    display: block;
                    h3 {
                        color: #333;
                        font-size: (14 / @rootSize);
                        margin-bottom: (8 / @rootSize);
                    }
                    p {
                        width: (215 / @rootSize);
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        font-size: (10 / @rootSize);
                        margin-bottom: (8 / @rootSize);
                    }
                    .bottom {
                        display: flex;
                        font-size: (10 / @rootSize);
                       .first {
                        text-align: center;
                        margin-right: (10 / @rootSize);
                        line-height:(15 / @rootSize) ;
                        width: (45 / @rootSize);
                        height: (15 / @rootSize);
                        border: 1px solid #cdcdcd;
                       }

                    }
                    span {
                        color: #f4a522;
                        font-size: (13 / @rootSize);
                    }

                }
            }
        }
     }
}
// 查看更多优质房源
.more {
    a {
        display: block;
        font-size: (13 / @rootSize);
        text-align: center;
        line-height: (38 / @rootSize);
        color: #a6a6a6;
        width: (260 / @rootSize);
        height: (38 / @rootSize);
        border-radius: (25 / @rootSize);
        background-color: #f2f2f3;
        margin: (24 / @rootSize) (45 / @rootSize);
    }
}
// 品牌故事
.story {
    border-radius: 5px;
    overflow: hidden;
    a {
        display: block;
        .pic {
            height: (85 / @rootSize);
            // background-color: pink;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
 
}
}
// 底部固定栏
.toolbar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: (50 / @rootSize);
    z-index: 999;
    margin-top: (60 / @rootSize);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    background-color: #ffffff;
    ul {
        display: flex;
        justify-content: space-evenly;
        text-align: center;
        // align-items: center;
        li {
            margin-top: (5 / @rootSize);
            a {
                img {
                    width: (20 / @rootSize);

                }
                p {
                    margin-top: (5 / @rootSize);
                    font-size: (11 / @rootSize);
                    color: #333;
                    font-weight: bold;

                }
            }
        }
    }


}